<template>
	<my-popup ref="sku_popup" mode="bottom" border-radius="20" height="800">
		<view class="padv20 relative h100p">
			<view class="j-s flex" v-if="currentSku">
				<view class="flex">
					<sb-img @click.native='handlePreview' :src="currentSku.cover" w='150' shadow />
					<view class="pad10 marh15">
						<sb-price-text :price='currentSku.salePrice' />
						<view class="c-d font24 marv10"> stock:{{currentSku.stock}}</view>
						<view class="c-d font24">{{ currentSku.skuSpec }} </view>
					</view>
				</view>
				<u-icon name="close-circle" size="35" @click="hide()"></u-icon>
			</view>
			<u-gap height="20"></u-gap>
			<!-- 规格选项列表 -->
			<scroll-view scroll-y style="height: 360rpx;">
				<view v-for="spec in speclist" :key="spec.name">
					<view class="bold padv10">{{ spec.name }}</view>
					<view class="taglist flex" style="border-radius: 10rpx">
						<view @click="handleSelectSku(spec,specVal,i)" v-for="(specVal, i) in spec.options" :key="i"
							class="tag padh30 font24 radius10" :class="{active:spec.selectedOption===specVal}">
							{{specVal}}
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 数量 -->
			<sb-line></sb-line>
			<view class="flex j-s marv10 a-c">
				<view class="flex a-c">
					<view class="bold">
						Quantity
					</view>
					<view v-if="currentSku" class="marh10 font24" style="color: #ccc">
						（Stock:{{currentSku.stock}}）
					</view>
				</view>
				<view class="">
					<u-number-box :min="1" v-model="number" @change="valChange"></u-number-box>
				</view>
			</view>
			<view class="btn-confirm font30 absolute w100 bottom0 bold flex j-c" @click="submitClick">
				{{buyText}}
			</view>
		</view>
	</my-popup>
</template>

<script>
	import _ from 'love-u'
	export default {
		data() {
			return {
				currentSku: null,
				number: 1,
				speclist: [],
				innerData: [],
				canBuy: true,
				buyText: "Start Order"
			};
		},
		props: {
			skus: {
				type: Array,
			},
			currentSkuSpeclist: {
				type: Array,
			},
		},
		computed: {
			totalPrice() {

			},
		},
		mounted() {
			Object.assign(this.innerData, this.skus)
			this.fmtSpecList()
			this.updatePageStyle()
		},
		methods: {
			hide() {
				this.$refs.sku_popup.hide();
			},
			show() {
				this.$refs.sku_popup.show();
			},
			handlePreview() {
				this.$previewImg(this.currentSku.cover)
			},
			fmtSpecList() {
				let specs = this.innerData.map(r => r.specJson)
				this.speclist = Object.keys(specs[0]).map((name, i) => {
					let options = [...new Set(specs.map(value => value[name]))]
					return {
						name,
						selectedOption: i === 0 ? options[0] : '',
						options
					}
				})
			},
			handleSelectSku(spec, specVal, i) {
				spec.selectedOption = specVal
				this.updatePageStyle({
					[spec.name]: specVal
				})
			},
			updatePageStyle(dict1) {
				//获取当前选中的值，格式如{a:1,b:2}
				let dict = this.speclist.reduce((o, r) => Object.assign(o, {
					[r.name]: r.selectedOption
				}), {})

				//获取对应的sku
				let sku = this.innerData.find(r => _.eq(r.specJson, dict))
				if (sku) {
					this.currentSku = sku
					this.canBuy = false
					this.buyText = 'Start Order'
				} else {
					this.canBuy = false
					this.buyText = 'Out Of Stock'
				}
			},
			valChange(val) {
				this.number = val.value;
			},
			submitClick() {
				this.currentSku.count = this.number;
				this.$emit("submit", this.currentSku);
			},
		},
	}
</script>

<style scoped lang="scss">
	.taglist {
		.tag {
			height: 50rpx;
			line-height: 50rpx;
			background: #eee;
			margin: 0 10rpx 20rpx 0;
			color: #888;

			&.active {
				background-color: $main-color;
				color: #fff;
			}
		}
	}

	.btn-confirm {
		background: $main-color;
		color: #fff;
		border-radius: 40rpx;
		line-height: 80rpx;
		height: 80rpx;
		bottom: 20rpx;
	}
</style>
